import React, { Component } from 'react';
import {
    NavBar,
    List,
    Button,
    WhiteSpace,
    WingBlank,
    Popover,
    Icon,
    Flex,
} from 'antd-mobile';
import http from '../../plugins/axios';
import './index.css';
import { dateFormat } from '../../utils/date';

export default class BlogList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            user: JSON.parse(window.sessionStorage.getItem('user')),
        };
    }

    componentDidMount() {
        this.getList();
        console.log('this.state', this.state);
    }

    async getList() {
        let res = await http.get('/blogs');
        console.log('res', res);
        this.setState({ list: res.data.list });
    }

    render() {
        return (
            <div className="blog-list">
                {/* 顶部导航 */}
                <NavBar
                    mode="light"
                    // rightContent={
                    //     <Popover
                    //         mask
                    //         overlayClassName="fortest"
                    //         overlayStyle={{ color: 'currentColor' }}
                    //         visible={this.state.visible}
                    //         overlay={[
                    //             <Popover.Item value="logout">
                    //                 <i
                    //                     className="iconfont icontuichudenglu"
                    //                     style={{ marginRight: '5px' }}
                    //                 ></i>
                    //                 退出登录
                    //             </Popover.Item>,
                    //         ]}
                    //         align={{
                    //             overflow: { adjustY: 0, adjustX: 0 },
                    //             offset: [-10, 0],
                    //         }}
                    //         onVisibleChange={this.handleVisibleChange}
                    //         onSelect={this.onSelect}
                    //     >
                    //         <div
                    //             style={{
                    //                 height: '100%',
                    //                 padding: '0 15px',
                    //                 marginRight: '-15px',
                    //                 display: 'flex',
                    //                 alignItems: 'center',
                    //             }}
                    //         >
                    //             <Icon type="ellipsis" />
                    //         </div>
                    //     </Popover>
                    // }
                >
                    网站博客
                </NavBar>

                {/* 渲染博客列表 */}
                <WingBlank>
                    <List renderHeader={() => <h1>博客列表</h1>}>
                        {this.state.list.map((blog) => {
                            return (
                                <List.Item
                                    key={blog.bid}
                                    extra={dateFormat(blog.create_time)}
                                    align="top"
                                    onClick={() =>
                                        this.props.history.push(
                                            `/blogs/${blog.bid}`,
                                        )
                                    }
                                >
                                    {blog.title}
                                    <List.Item.Brief>
                                        <Flex justify="space-between">
                                            <Flex.Item>
                                                {blog.nickname}
                                            </Flex.Item>

                                            {this.state.user.id ===
                                                blog.uid && (
                                                <Flex.Item>
                                                    <Button
                                                        type="ghost"
                                                        inline
                                                        size="small"
                                                        onClick={() =>
                                                            this.props.history.push(
                                                                `/blog/edit/${blog.bid}`,
                                                            )
                                                        }
                                                    >
                                                        编辑
                                                    </Button>
                                                    <Button
                                                        type="ghost"
                                                        inline
                                                        size="small"
                                                    >
                                                        删除
                                                    </Button>
                                                </Flex.Item>
                                            )}
                                        </Flex>
                                    </List.Item.Brief>
                                </List.Item>
                            );
                        })}

                        <WhiteSpace />

                        <Button
                            type="primary"
                            onClick={() => {
                                this.props.history.push('/blogs/add');
                            }}
                        >
                            <i className="iconfont iconAdd"></i> 添加博客
                        </Button>
                    </List>
                </WingBlank>
            </div>
        );
    }
}
